$(function(){
	

	//左侧导航
	$('.div3 .left-menu').mouseenter(function(){
		$(this).css({'background':'#eee'});
		$(this).find('.right').show();
		$('.right').not($(this).find('.right')).hide();
	});

	$('.div3 .left-menu').mouseleave(function(){
		$(this).find('.right').hide();
		$(this).css({'background':'#fff'});
	});

	// 幻灯片设计
	$(".paging").show();  
	$(".paging a:first").addClass("active");  
	num=$('.paging a:first').attr('rel');
	arr=[1,2,3,4,5,6,7,8,9];
	imgs=arr.slice((num-1)*3,num*3);

	for(i=0;i<imgs.length;i++){
		$('.'+imgs[i]).show();
	}
	   
	
	var imageWidth = $(".window").width();  
	var imageSum = $(".image_reel img").size;  
	var imageReelWidth = imageWidth * imageSum;  
	   
	
	$(".image_reel").css({'width' : imageReelWidth});   

	// 第二步
	
	rotate = function(end){  
		if(end){
			var triggerID = imageSum - 1; 
			var image_reelPosition = triggerID * imageWidth; 
			
			$(".paging a").removeClass('active'); 
			$active.addClass('active'); 
			
			//Slider Animation  
			$(".image_reel").animate({  
			    left: -image_reelPosition  
			}, 500 ,function(){
				$(this).css({'left':'0px'});
			});  
		}else{
			var triggerID = $active.attr("rel") - 1;   
			var image_reelPosition = triggerID * imageWidth; 
			
			$(".paging a").removeClass('active');
			$active.addClass('active'); 
			
			//Slider Animation  
			$(".image_reel").animate({  
			    left: -image_reelPosition  
			}, 500 );  
		}
	  	
	  	act=$('.paging a.active').attr('rel'); 

	  	imgs=arr.slice((act-1)*3,act*3);

	  	for(i=0;i<imgs.length;i++){
	  		$('.'+imgs[i]).show();
	  	}
	};   
	   
	
	rotateSwitch = function(){  
	    play = setInterval(function(){
	    	$('.img').hide();
	        $active = $('.paging a.active').next();  
	        rel=$('.paging a.active').attr('rel');

	        if ( rel==3) { 
	            $active = $('.paging a:first'); 
	            end=true;
	        }else{
	        	end=false;
	        }
	        rotate(end);  
	    }, 2000);  
	};  
	   
	rotateSwitch(); 

	// 第三步
	//On Hover  
	$(".image_reel a").hover(function() {  
	    clearInterval(play);
	}, function() {  
	    rotateSwitch();
	});   
	   
	//On Click  
	$(".paging a").click(function() {  
		$('.img').hide();
	    $active = $(this); 

	    act=$(this).attr('rel'); 

	    imgs=arr.slice((act-1)*3,act*3);

	    for(i=0;i<imgs.length;i++){
	    	$('.'+imgs[i]).show();
	    }

	    //Reset Timer  
	    clearInterval(play); 
	    rotate(false); 
	    rotateSwitch(); 
	    return false;  
	});
});

